<template>
  <div>
    <el-upload :action="uploadUrl" :headers="headerObj" :on-preview="handlePreview" :file-list="fileList" list-type="picture" :on-success="handleSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-dialog :visible.sync="isPreviewDialogVisible" width="50%" title="预览">
      <img width="100%" :src="previewImgUrl" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewImgUrl: '',
      isPreviewDialogVisible: false,
      uploadUrl: 'http://www',
      headerObj: {},
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://acg.xydwz.cn/api/api.php'
        },
        {
          name: 'food2.jpeg',
          url: 'https://acg.xydwz.cn/api/api.php'
        }
      ]
    }
  },
  methods: {
    handlePreview(file) {
      console.log(file)
      // this.previewImgUrl = file.url
      this.isPreviewDialogVisible = true
    },
    handleSuccess() {
      this.$message({ type: 'success', message: '上传图片成功', duration: 2000 })
    }
  }
}
</script>

<style>
  .el-upload {
    margin-top: 20px;
  }
</style>
